<!DOCTYPE html>
<html>

<head>
    <style>
        body {
            display: grid;
            grid-template-columns: repeat(12, 140px);
            grid-template-rows: repeat(3, 140px);
            gap: 20px;
            /*  grid-template-areas 不能用纯数值命名*/
            grid-template-areas: "item1 item1 item1 item1 item2 item2 item2 item2 item3 item3 item4 item4"
            "item1 item1 item1 item1 item5 item5 item8 item8 item7 item7 item7 item7"
            "item9 item9 item10 item10 item5 item5 item6 item6 item7 item7 item7 item7";

        }

        div {
            background-color: antiquewhite;
            text-align: center;
        }

        div:nth-child(1) {
            grid-area: item1;
        }

        div:nth-child(2) {
            grid-area: item2;
        }
        div:nth-child(3) {
            grid-area: item3;
        }
        div:nth-child(4) {
            grid-area: item4;
        }
        div:nth-child(5) {
            grid-area: item5;
        }
        div:nth-child(6) {
            grid-area: item6;
        }
        div:nth-child(7) {
            grid-area: item7;
        }

        div:nth-child(8) {
            grid-area: item8;
        }
        div:nth-child(9) {
            grid-area: item9;
        }
        div:nth-child(10) {
            grid-area: item10;
        }
    </style>
</head>

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</body>

</html>